// createRouter          用于创建路由的函数
// createWebHashHistory  用于创建哈希路由的函数
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/layout'
import store from '@/store'
import { h } from 'vue'
// 配置路由，，路径和组件的映射关系
const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
      { path: '/', component: () => import('@/views/home') },
      { path: 'category/:id', component: () => import('@/views/category/') },
      {
        path: 'category/sub/:id',
        component: () => import('@/views/category/sub')
      },
      { path: 'product/:id', component: () => import('@/views/goods/index') },
      { path: 'cart', component: () => import('@/views/cart/index') },
      {
        path: '/member/checkout',
        component: () => import('@/views/menber/pay/checkout')
      },
      {
        path: '/member/pay',
        component: () => import('@/views/menber/pay/index')
      },
      {
        path: '/member/pay/callback',
        component: () => import('@/views/menber/pay/callback')
      },
      {
        path: '/member',
        component: () => import('@/views/menber/Layout'),
        children: [
          { path: '', component: () => import('@/views/menber/home/index') },
          // {
          //   path: '/member/order',
          //   component: () => import('@/views/menber/order/index')
          // },
          // {
          //   path: '/member/order/:id',
          //   component: () => import('@/views/menber/order/detail')
          // }
          {
            path: '/member/order',
            // vue3.0 需要有嵌套关系才能模糊匹配
            component: { render: () => h(<RouterView />) },
            children: [
              {
                path: '',
                component: () => import('@/views/menber/order/index')
              },
              {
                path: ':id',
                component: () => import('@/views/menber/order/detail')
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/login/callback',
    component: () => import('@/views/login/callback')
  }
]
// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 每次切换路由的时候滚动到顶部
  scrollBehavior: (to, from, savedPosition) => {
    // console.log(to.path)
    // console.log(savedPosition)
    if (to.path !== '/') {
      // 始终滚动到顶部
      // 流畅的滚动
      return {
        top: 0,
        behavior: 'smooth'
      }
      // Vue2返回的是 { x:0 , y:0 }
      // Vue3返回的是 { left:0 , top:0 }
    } else {
      return savedPosition
    }
  }
})

router.beforeEach(async (to, from, next) => {
  // 先判断有无token
  if (store.state.user.profile.token) {
    //   有token 但是如果去的是登录页 帮他跳转到主页
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    if (to.path.startsWith('/member')) {
      next({ path: '/login', query: { redirectUrl: to.fullPath } })
    } else {
      next()
    }
  }
})

// 导出路由实例
export default router
